<template>
    <view>
        <view class="form-item">
            <input class="inp" maxlength="11" placeholder="请输入账号" v-model="formData.number" />
        </view>
        <view class="form-item">
            <input class="inp" password placeholder="请输入密码" v-model="formData.password" />
        </view>
    </view>
</template>

<script>
    export default {
        name: "number-form",
        data() {
            return {
                formData: {
                    number: '',
                    password: ''
                }
            };
        },
        methods: {
            validataForm: function() {
                if (this.formData.number.length < 11) {
                    this.tostMsg('账号不合法', 'error')
                    return false;
                }
                if (this.formData.password.length < 6) {
                    this.tostMsg('密码最少6位', 'error')
                    return false;
                }
                this.$emit('autoCheckFormData', this.formData)
                return true;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .form-item {
        $margin : 40rpx;

        margin: {
            top: $margin;
            bottom: $margin;
        }

        ;

        .inp {
            border: {
                width: 1rpx;
                style: solid;
                color: lightgray;
                radius: 20rpx;
            }

            ;
            width: 90%;
            font-size: 28rpx;
            color: $uni-text-color;

            padding: 20rpx;
            margin: 0 auto;

            margin: {
                top: 20rpx;
                bottom: 20rpx;
            }

            ;
            $inpHit : 40rpx;
            height: $inpHit;
            line-height: $inpHit;
        }
    }
</style>